<template>
  <div class="container-answers">
    <div class="btn">
      <span :class="{ btnAct: btnActive == 'a' }" @click="choose('a')">
        一级（问题类别）
      </span>
      <span :class="{ btnAct: btnActive == 'b' }" @click="choose('b')">
        二级（问题）
      </span>
      <span :class="{ btnAct: btnActive == 'c' }" @click="choose('c')">
        三级（答案）
      </span>
    </div>
    <div class="add-btn" @click="handleAdd">新增</div>
    <el-table
      :data="listDtos"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      v-loading="listLoading"
    >
      <el-table-column align="center" width="200" label="id" prop="id" />
      <el-table-column
        align="center"
        width="200"
        label="分类id"
        prop="categoryId"
        v-if="btnActive == 'b'"
      />
      <el-table-column
        align="center"
        width="200"
        label="问题id"
        prop="questionId"
        v-if="btnActive == 'c'"
      />
      <el-table-column
        align="center"
        width=""
        label="内容"
        prop="nameJson"
        v-if="btnActive == 'a'"
      />
      <el-table-column
        align="center"
        width=""
        label="内容"
        prop="questionJson"
        v-if="btnActive == 'b'"
      />
      <el-table-column
        align="center"
        width=""
        label="内容"
        prop="answerJson"
        v-if="btnActive == 'c'"
      />
      <el-table-column align="center" label="创建时间" width="250">
        <template slot-scope="{ row }">{{
          row.createTime | parseTime
        }}</template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      status-icon
      label-position="right"
      label-width="180px"
      @close="closeDialog"
    >
      <el-form
        :model="param"
        label-width="110px"
        class="form-materPlan"
        label-position="right"
        style="width: 90%;"
      >
        <el-form-item label="id" prop="id" v-if="dialogTitle == '编辑'">
          <el-input
            ref="inputVal"
            v-model="param.id"
            placeholder="请输入id"
            style="width: 90%;"
            clearable
          />
        </el-form-item>

        <el-form-item label="分类id" prop="id" v-if="btnActive == 'b'">
          <el-input
            ref="inputVal"
            v-model="param.categoryId"
            placeholder="请输入分类id"
            style="width: 90%;"
            clearable
          />
        </el-form-item>

        <el-form-item label="问题id" prop="id" v-if="btnActive == 'c'">
          <el-input
            ref="inputVal"
            v-model="param.questionId"
            placeholder="请输入分类id"
            style="width: 90%;"
            clearable
          />
        </el-form-item>
        <el-form-item label="内容" prop="langJson">
          <div class="languageJson" v-if="dialogTitle == '新增'">
            <span
              :class="{ chooseLang: lang == 'us' }"
              @click="chooseLang('us')"
              >英语</span
            >
            <span
              :class="{ chooseLang: lang == 'tw' }"
              @click="chooseLang('tw')"
              >繁中</span
            >
          </div>
          <template v-if="dialogTitle == '新增'">
            <el-input
              type="textarea"
              :rows="13"
              v-model="langContent.enUS"
              placeholder="请输入英文"
              v-if="lang == 'us'"
            ></el-input>
            <el-input
              type="textarea"
              :rows="13"
              v-model="langContent.zhTW"
              placeholder="请输入繁中"
              v-if="lang == 'tw'"
            ></el-input>
          </template>
          <template v-if="dialogTitle == '编辑'">
            <el-input
              type="textarea"
              :rows="13"
              v-model="param.nameJson"
              placeholder="请编辑"
              v-if="btnActive == 'a'"
            ></el-input>

            <el-input
              type="textarea"
              :rows="13"
              v-model="param.questionJson"
              placeholder="请编辑"
              v-if="btnActive == 'b'"
            ></el-input>

            <el-input
              type="textarea"
              :rows="13"
              v-model="param.answerJson"
              placeholder="请编辑"
              v-if="btnActive == 'c'"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item label="时间" prop="createTime">
          <el-date-picker
            v-model="param.createTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@components/TablePagination'

import {
  getCategoryListApi,
  addCategoryApi,
  updateCategoryApi,
  getQuestionListApi,
  addQuestionApi,
  updateQuestionApi,
  getAnswerListApi,
  addAnswerApi,
  updateAnswerApi
} from '@api/tarot'
export default {
  components: { TablePagination },
  props: {},
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '新增',
      formData: {},
      listDtos: [],
      btnActive: 'a',
      param: {
        id: '',
        questionId: '',
        categoryId: '',
        content: '',
        createTime: '',
        nameJson: '',
        questionJson: '',
        answerJson: ''
      },
      lang: 'us',
      langContent: {
        enUS: '',
        zhTW: ''
      },
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      listQuery: {
        limit: 10,
        page: 1
      }
    }
  },
  created() {
    this.choose()
  },
  mounted() {},
  methods: {
    // 分页
    handleSizeChange(limit) {
      // console.log(`每页 ${limit} 条`)
      this.pageSize = limit
      this.choose(this.btnActive)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.choose(this.btnActive)
    },
    // 选择等级
    choose(val) {
      if (val) {
        this.btnActive = val
      }
      let func = null
      if (this.btnActive == 'a') {
        func = getCategoryListApi
      } else if (this.btnActive == 'b') {
        func = getQuestionListApi
      } else {
        func = getAnswerListApi
      }
      let params = {
        limit: this.pageSize || this.listQuery.limit,
        page: this.currentPage || this.listQuery.page
      }
      func(params).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.listDtos = res.data && res.data.list
          this.total = res.data && res.data.total
        }
      })
    },
    // 新增
    handleAdd() {
      this.dialogVisible = true
      this.dialogTitle = '新增'
    },
    // 选择语言
    chooseLang(val) {
      this.lang = val
    },
    // 取消
    cancel() {
      this.dialogVisible = false
      this.closeDialog()
    },
    // 确定
    confirm() {
      let func = null
      let data = null
      if (this.btnActive == 'a') {
        if (this.dialogTitle == '新增') {
          func = addCategoryApi
          data = {
            createTime: this.param.createTime.getTime(),
            nameJson: JSON.stringify(this.langContent)
          }
        } else {
          func = updateCategoryApi
          data = {
            id: this.param.id,
            createTime: this.param.createTime,
            nameJson: this.param.nameJson
          }
        }
      } else if (this.btnActive == 'b') {
        if (this.dialogTitle == '新增') {
          func = addQuestionApi
          data = {
            createTime: this.param.createTime.getTime(),
            categoryId: this.param.categoryId,
            questionJson: JSON.stringify(this.langContent)
          }
        } else {
          func = updateQuestionApi
          data = {
            id: this.param.id,
            createTime: this.param.createTime,
            categoryId: this.param.categoryId,
            questionJson: this.param.questionJson
          }
        }
      } else {
        if (this.dialogTitle == '新增') {
          func = addAnswerApi
          data = {
            createTime: this.param.createTime.getTime(),
            questionId: this.param.questionId,
            answerJson: JSON.stringify(this.langContent)
          }
        } else {
          func = updateAnswerApi
          data = {
            id: this.param.id,
            createTime: this.param.createTime,
            questionId: this.param.questionId,
            answerJson: this.param.answerJson
          }
        }
      }
      console.log('data', data)
      console.log('dialogTitle', this.dialogTitle, 'btnActive', this.btnActive)

      func(data).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success('Success!')
          this.choose()
        }
      })
      this.dialogVisible = false
    },
    // 编辑
    handleUpdate(row) {
      console.log(row)
      this.dialogTitle = '编辑'
      this.dialogVisible = true
      this.param.id = row.id
      this.param.createTime = row.createTime
      this.param.nameJson = row.nameJson
      this.param.categoryId = row.categoryId
      this.param.questionJson = row.questionJson
      this.param.questionId = row.questionId
      this.param.answerJson = row.answerJson
    },
    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false
      this.param.id = ''
      this.param.questionId = ''
      this.param.categoryId = ''
      this.param.content = ''
      this.param.createTime = ''
      this.param.nameJson = ''
      this.param.questionJson = ''
      this.param.answerJson = ''
      this.langContent.enUS = ''
      this.langContent.zhTW = ''
    }
  },
  watch: {
    btnActive(newVal, oldVal) {
      if (newVal != oldVal) {
        console.log(newVal, oldVal)
        this.currentPage = 1
        this.pageSize = 10
        this.choose(this.btnActive)
      }
    }
  },
  computed: {}
}
</script>
<style lang="scss" scoped>
.container-answers {
  padding: 16px;
  .btn {
    margin-top: 10px;
    display: flex;
    > span {
      display: block;
      width: 200px;
      height: 50px;
      margin-right: 20px;
      text-align: center;
      line-height: 50px;
      background-color: #7f7f7f;
      color: #fff;
      cursor: pointer;
    }
    .btnAct {
      background-color: #02a7f0;
    }
  }

  .add-btn {
    width: 120px;
    height: 50px;
    margin: 20px 0;
    text-align: center;
    line-height: 50px;
    background-color: #02a7f0;
    color: #fff;
    cursor: pointer;
  }
  .languageJson {
    > span {
      display: inline-block;
      width: 150px;
      height: 40px;
      line-height: 40px;
      background-color: #ccc;
      text-align: center;
      cursor: pointer;
      margin-right: 40px;
      margin-bottom: 20px;
      color: #000;
    }
    .chooseLang {
      background-color: #02a7f0;
    }
  }
}
</style>
